
<template>
  <!------------------------------------ 商品规格 ------------------------------------
    @desc 包含商品促销、配送、规格、参数
    @author kyle
    @date 2021-03-05
    @props
      policyList  ———— 促销信息列表（对应PolicyList）
      product     ———— 商品数据（对应ProductInfo）
      address     ———— 地址信息（对应UserAddress）
      attrList    ———— 规格列表（对应ProductInfo.ProductAttributesList）
      optType     ———— 类型
    @method
      showOpt       ———— 显示弹窗
      changeAddress ———— 修改地址
  -->
  <div class="item-box">
    <!-- 促销 -->
    <div v-show="optType==='sales'" class="item" @click="showOpt('sales')">
      <p class="color-gray-light mr-60 flex-s-0">促销</p>
      <div class="pr-30">
        <p v-for="(item,index) in policyList" :key="index" class="option-item text-show-line-1">
          <span class="color-primary mr-20">[{{ item.Name }}]</span>
          <span>{{ item.Remark }}</span>
        </p>
      </div>
    </div>

    <!-- 配送 -->
    <div v-show="optType==='post'" class="item" @click="showOpt('post')">
      <p class="color-gray-light mr-60 flex-s-0">配送</p>
      <div class="pr-40">
        <!-- <p class="option-item text-show-line-1">
          <span>浙江杭州 至  泉州市丰泽区</span>
        </p> -->
        <p v-show="JSON.stringify(addressObj)!=='{}'" class=" text-show-line-1">
          <span v-show="product.DeliveryPlace">{{ product.DeliveryPlace }} &nbsp;</span>
          至
          <span>&nbsp; {{ (addressObj.ProvinceName + addressObj.CityName)||'' }}</span>
        </p>
        <p v-show="JSON.stringify(addressObj)==='{}'" class=" text-show-line-1">
          请先添加收货地址
        </p>
      </div>
    </div>
    <!-- 规格 -->
    <div v-show="optType==='attr'" class="item" @click="showOpt('attr')">
      <p class="color-gray-light mr-60 flex-s-0">规格</p>
      <div class="pr-30">
        <p class="option-item text-show-line-1">
          <span v-for="(item,index) in attrList" :key="index">{{ item.AttributeName }} </span>
        </p>
      </div>
    </div>

    <!-- 参数 -->
    <div v-show="optType==='param'" class="item" @click="showOpt('param')">
      <p class="color-gray-light mr-60 flex-s-0">参数</p>
      <div class="pr-40">
        <p class="option-item text-show-line-1">
          <span>{{ product.ParamerValue }}</span>
        </p>
      </div>
    </div>

    <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
      <optionPopup v-show="optPopup.type==='sales'" :policy-list="policyList" opt-type="sales" />
      <optionPopup v-show="optPopup.type==='param'" :product="product" opt-type="param" />
      <addressList v-show="optPopup.type==='post'" class=" bg-gray" style="min-height:100vh" @colseAdress="closePopup" @changeAddress="changeAddress" />
    </van-popup>
  </div>
</template>

<script>
import optionPopup from 'components/productDetail/optionPopup'
import addressList from 'components/address'
export default {
  name: 'ProductOption',
  components: {
    optionPopup,
    addressList
  },
  props: {
    policyList: { // 促销信息列表
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    product: { // 商品数据
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    address: { // 地址
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    attrList: { // 规格列表
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    optType: { // 类型
      type: String,
      required: false,
      default: 'sales'
    }
  },
  data() {
    return {
      optPopup: {
        show: false,
        type: ''
      }
    }
  },
  computed: {
    addressObj() {
      const _address = this.address || {}
      return _address
    }
  },

  methods: {
    showOpt(type) {
      if (type === 'attr') {
        if (this.product.SaleStatus == 0) {
          // 仓库中商品不显示规格购买
          return false
        }
        this.$emit('showOpt', type)
      } else {
        this.optPopup.type = type
        this.optPopup.show = true
      }
    },
    closePopup() {
      this.optPopup.show = false
    },
    changeAddress(address) {
      // 更改地址
      this.optPopup.show = false
      this.$emit('changeAddress', address)
    }
  }
}
</script>

<style lang="scss" scoped>
// 促销、参数、规格
.item-box{
  &:first-child{
    padding-bottom: 25px;
  }
  &:last-child{
    padding-bottom: 0;
  }
  &:not(:first-child){
    border-top: 1px solid $colorBorder;
    padding-top: 25px;
    &:after{
      top: 35px;
    }
  }
  .van-popup{
    background: transparent;
  }
  .item{
    position: relative;
    @include flex-content(flex-start, flex-start);
    font-size: 26px;
    &:after{
      content:'';
      position: absolute;
      top: 10px;
      right: 0;
      width: 12px;
      height: 12px;
      border: 2px solid;
      border-color:$color9 $color9 transparent transparent;
      transform: rotate(45deg);
    }
    .option-item:not(:first-child){
      margin-top: 10px;
    }
  }
}
</style>
